<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.projectId"
          clearable
          placeholder="项目"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.jobName"
          clearable
          placeholder="任务名称"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" :router-name="query.routerName" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <customBtns :permission="permission" :route-path="routePath" />
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        stripe
        border
        style="width: 100%;"
        @row-dblclick="editFiled"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="40" />
        <el-table-column prop="projectId" label="项目" />
        <el-table-column prop="jobName" label="任务名称" />
        <el-table-column prop="cronScript" label="执行计划" />
        <el-table-column prop="memo" label="备注" />
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-permission="['admin', 'migJob:edit', 'migJob:del']"
          label="操作"
          width="140px"
          align="center"
        >
          <template slot-scope="scope">
            <customOperation
              :data="scope.row"
              :permission="permission"
              :id-field="'jobId'"
              @editFiled="editFiled"
            />
            <el-tooltip
              class="item"
              effect="dark"
              content="执行"
              :hide-after="crud.CONSTOM.TIP_TIME"
              placement="top-start"
            >
              <el-button
                size="mini"
                type="success"
                icon="el-icon-caret-right"
                @click="execMigTask(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudMigJob from '@/api/migJob'
import { doMigJob } from '@/api/migrate/coustomFunction'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import customOperation from '@crud/customOperation'
import pagination from '@crud/Pagination'
import customBtns from '@crud/customBtns'

const defaultForm = {
  jobId: null,
  projectId: null,
  jobName: null,
  cronScript: null,
  memo: null,
  createTime: null,
  updateTime: null
}
export default {
  name: 'MigJob',
  components: { pagination, rrOperation, customOperation, customBtns },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '迁移任务',
      url: 'api/migJob',
      sort: 'job_id,desc',
      idfield: 'jobId',
      // 只有在doNotQuery为true的情况下才不走页面初始化时系统的第一次查询
      doNotQuery: true,
      query: { projectId: '', jobName: '' },
      crudMethod: { ...crudMigJob }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'migJob:add'],
        edit: ['admin', 'migJob:edit'],
        del: ['admin', 'migJob:del']
      },
      routePath: {
        add: '/migJobAdd',
        edit: '/migJobEdit'
      },
      permissionRow: {
        edit: ['admin', 'migDefMain:edit'],
        del: ['migDefMain:del'],
        config: true
      },
      rules: {
        jobId: [{ required: true, message: '任务ID不能为空', trigger: 'blur' }],
        jobName: [
          { required: true, message: '任务名称不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'projectId', display_name: '项目' },
        { key: 'jobName', display_name: '任务名称' }
      ]
    }
  },
  created() {
    setTimeout(() => {
      this.query.routerName = this.$route.name || ''
      let sessionQueryData = ''
      try {
        sessionQueryData = JSON.parse(
          sessionStorage.getItem(this.query.routerName)
        )
      } catch (e) {
        console.error(e.message)
      }
      if (sessionQueryData) {
        Object.assign(this.query, sessionQueryData)
        // this.query={...this.query, ...sessionQueryData};
      }
      // 查询的标识
      this.query.relation = true
      this.crud.refresh()
    })
  },
  methods: {
    // 钩子：在获取表格数据之前执行，unQuery=false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.query.unQuery = true
      return true
    },
    editFiled(data) {
      const query = data
      query.queryEdit = true
      query.PK_FIELD = 'jobId'
      this.$router.push({
        path: this.routePath.edit,
        query
      })
    },
    execMigTask(row) {
      var that = this
      var messageStr = '是否确定执行任务 ' + row.jobName
      this.$confirm(messageStr, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message('已开始执行')
          var params = { id: row.jobId } // 这里执行的时候传CODE
          doMigJob(params).then(res => {
            that.crud.refresh()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消执行'
          })
        })
    }
  }
}
</script>

<style scoped></style>
